<div class="posts mt-4 pagination-container" id="pageContainer">
    <#if posts?? && posts.getTotalElements() gt 0>
        <ul class="posts-list">
            <#list posts.content as post>
                <li class="post relative list-none w-full pt-4 mt-0 inline-block">
                    <div class="post-time-img mr-2 h-40 w-40 relative flex-shrink-0 overflow-hidden float-left">
                        <div class="post-date color-gray-300 mt-2 font-bold text-center w-full h-full flex flex-col items-center justify-center">
                            <b class="text-7xl"> ${post.createTime?string("dd")}</b>
                            <span class="block font-normal text-base pt-1">${post.createTime?string("yyyy年MM月")}</span>
                        </div>
                    </div>
                    <div class="post-preview absolute w-full h-full top-0 left-0">
                        <#if post.thumbnail?? && post.thumbnail!=''>
                            <a href="${post.fullPath!}">
                                <img class="lazyload" src="${theme_base!}/source/images/loading.svg" data-src="${post.thumbnail}" alt="${post.title}"/>
                            </a>
                        <#elseif settings.card_random_cover_list?? && settings.card_random_cover_list != ''>
                            <a href="${post.fullPath!}">
                                <img class="lazyload img-random" src="${theme_base!}/source/images/loading.svg" data-src="" index="${post_index}" alt="${post.title}"/>
                            </a>
                        </#if>
                    </div>
                    <div class="post-content pl-2 pt-0 float-left">
                        <p class="post-mobile-date min-h-52 overflow-hidden m-0 ">
                            <a rel="bookmark" href="${post.fullPath!}">${post.createTime?string("yyyy年MM月dd日")}</a>
                        </p>
                        <h2 class="text-2xl font-bold relative mb-3 pb-4 mt-0">
                            <a class="block" rel="bookmark" href="${post.fullPath!}">
                                 ${post.title}
                            </a>
                        </h2>
                        <p class="text-lg break-all text-gray-400 leading-relaxed tracking-wider min-h-52 overflow-hidden leading-4 m-0 box">
                            <a rel="bookmark" href="${post.fullPath!}">
                               ${post.summary!}
                            </a>
                        </p>
                        <div class="post-meta flex flex-wrap items-center	mt-2">
                            <a class="post-more-link color-gray-600 inline-block text-base" href="${post.fullPath!}">
                                <span class="text opacity-0 m-0 text-sm font-bold max-w-0 overflow-hidden inline-block align-text-bottom break-normal">
                                    查看全文
                                </span>
                            </a>
                        </div>
                    </div>
                </li>
            </#list>
        </ul>
    </#if>
</div>
